<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="static/iview/iview.css">
	<link rel="stylesheet" href="static/css/font-awesome.min.css">
	<link rel="stylesheet" href="static/iview/main.css">
</head>

<body>
	<div id="app">
		<div class="zsx-setting" v-if="shadeShow">
			<div class="setting-box">
				<Card :bordered="false">
					<p slot="title">{{label.setting}}</p>
					<i-form :model="settingForm" ref="settingForm" :rules="rules" :label-width="90">
						<form-item :label="label.languageChoose" prop="language">
							<i-select v-model="settingForm.language">
								<i-option v-for="item in language" :value="item.value" :key="item.value">{{item.label}}</i-option>
							</i-select>
						</form-item>
						<form-item :label="label.defaultToken" prop="defaultAuth">
							<i-input v-model="settingForm.defaultAuth"></i-input>
						</form-item>
						<form-item :label="label.noAuth" prop="noAuth">
							<i-select id="multiple-select" v-model="settingForm.noAuth" multiple>
								<i-option v-for="item in noAuth" :value="item.value" :key="item.label">{{item.label || item.path}}</i-option>
							</i-select>
            </form-item>
            <form-item :label="label.defaultParameterType">
                <i-select v-model="settingForm.requestParameterType">
                  <i-option v-for="item in parametersType" :value="item.value" :key="item.value">{{item.label}}</i-option>
                </i-select>
            </form-item>
						<!-- 默认保存配置 -->
						<!-- <Checkbox v-model="settingForm.remember">{{label.rememberSetting}}</Checkbox> -->
					</i-form>
					<i-button type="primary" long @click="buSureSetting">{{label.besure}}</i-button>
				</Card>
			</div>
		</div>
		<div class="zsx-header">
			<div class="herder-title">
				<Badge :count="info.version" class-name="demo-badge-alone">
					<span class="text">{{info.title}}</span>
				</Badge>
			</div>
			<div class="header-other clearfix">
				<i-button @click='goHome' class="fl" style="margin-right: 10px;margin-top: 15px;">返回主页</i-button>
				<div class="drap fr">
					<Dropdown @on-click="choseOperation">
						<i-button>
							{{label.operation}}
							<Icon type="arrow-down-b"></Icon>
						</i-button>
						<dropdown-menu slot="list">
							<dropdown-item name="clear">{{label.clearSetting}}</dropdown-item>
							<dropdown-item name="modify">{{label.modifySetting}}</dropdown-item>
						</dropdown-menu>
					</Dropdown>
				</div>
			</div>
		</div>
		<div class="drag-content" id="drag-content">
			<div class="zsx-sidebar" id="zsx-sidebar">
				<div class="zsx-sidebar-search">
					<i-input v-model="sidebarSearchInp" :placeholder="label.searchPlaceholder" @on-enter="sidebarSearch" @on-click="sidebarSearch"
					 icon="search"></i-input>
				</div>
				<i-menu theme="dark" mode="vertical" ref="sideMenu" @on-select="selectMenu" :active-name="currentPageName" :open-names="openNames"
				 style="width:100%;">
					<template v-for="item in sidebarData">
						<Submenu v-if="item.children&&item.children.length" :name="item.name" :key="item.name">
							<template slot="title">{{item.name}}</template>
							<template v-if="item.children && item.children.length">
								<template v-for="child in item.children">
									<!-- 如果有title -->
									<menu-group v-if="child.title" :title="child.description || child.label">
										<menu-item :name="child.label + '.' + child.method">
											<span :class="child.method">{{child.method.toUpperCase()}}</span>
											<span class="pad-left10">{{child.label}}</span>
										</menu-item>
									</menu-group>
									<!-- 如果没title -->
									<menu-item v-else :name="child.label + '.' + child.method">
										<span :class="child.method">{{child.method.toUpperCase()}}</span>
										<span class="pad-left10">{{child.description}}</span>
										<span class="pad-left10">{{child.label}}</span>
									</menu-item>
								</template>
							</template>
						</Submenu>
						<menu-item v-else :name="item.label + '.' + item.method">
							<span :class="item.method">{{item.method.toUpperCase()}}</span>
							<span class="pad-left10">{{item.description}}</span>
							<span class="pad-left10">{{item.label}}</span>
						</menu-item>
					</template>
				</i-menu>
			</div>
			<div class="zsx-main-right" id="zsx-main-right">
				<div class="zsx-main" v-show="onOff">
					<div class="tags-box">
						<div id="wrapper">
							<div class="scroller" id="scroller" :style="'width:' + scrollerWidth + 'px'">
								<ul>
									<li v-for="name in openedPages" class="tag-item">
										<Tag type="dot" closable :color="currentPageName && currentPageName==name ? 'blue' : 'default'" @click.native="clickTag(name)"
										 :name="name" @on-close="closePage(name)">{{tagsMap[name]}}</Tag>
									</li>
								</ul>
							</div>
						</div>
						<div class="tags-operation">
							<Dropdown @on-click="closePages">
								<i-button>
									{{label.close}}
									<Icon type="arrow-down-b"></Icon>
								</i-button>
								<dropdown-menu slot="list">
									<dropdown-item name="other">{{label.close + label.other}}</dropdown-item>
									<dropdown-item name="left">{{label.close + label.left}}</dropdown-item>
									<dropdown-item name="right">{{label.close + label.right}}</dropdown-item>
								</dropdown-menu>
							</Dropdown>
						</div>
					</div>
					<Tabs :value="showWhichOneTab">
						<!-- 接口介绍 -->
						<tab-pane :label="currentPageData.mainData && currentPageData.mainData.description || currentPageData.mainData && currentPageData.mainData.path"
						 name="description">
							<i-table border :columns="columnsTable" :data="currentPageData.tableData" size="small"></i-table>
							<form class="fieldsetForm">
								<fieldset>
									<legend>Headers</legend>
								</fieldset>
							</form>
							<i-table border :columns="columns" :data="currentPageData.headerTable" size="small" :no-data-text="label.none"></i-table>
							<!-- <form class="fieldsetForm">
								<fieldset>
									<legend>Custom Headers</legend>
								</fieldset>
							</form> -->

							<form class="fieldsetForm">
								<fieldset>
									<legend>Parameters</legend>
								</fieldset>
							</form>
							<i-table border :columns="columns" :data="currentPageData.parametersTable" size="small" :no-data-text="label.none"></i-table>
							<form class="fieldsetForm">
								<fieldset>
									<legend>Responses</legend>
								</fieldset>
							</form>
							<i-table border :columns="responseColumns" :data="currentPageData.responseData" size="small"></i-table>
							
						</tab-pane>
						<!-- 调试 -->
						<tab-pane :label="label.debug" name="debug">
              <div class="self-headers-content">
                <form class="fieldsetForm">
                  <fieldset>
                    <legend>Headers</legend>
                  </fieldset>
                </form>
                <i-table class="debug-headers" border :columns="debugColumns" :data="currentPageData.debugHeaders" size="small"
                :no-data-text="label.none"></i-table>
							</div>
							<form class="fieldsetForm">
								<fieldset>
									<legend>Custom Headers</legend>
								</fieldset>
							</form>
							<div class="custom-headers-wrapper">
								<i-button type="primary" @click="addCustomHeader()">{{label.add}}</i-button>
								<i-button type="error" @click="clearCustomHeader()">{{label.clear}}</i-button>
								<i-button type="primary" @click="previewCollection()">我的收藏</i-button>
								<Row v-if="customHeadersArr.length" style="margin-bottom: 15px;margin-top: 15px;">
									<i-col span="10">key</i-col>
									<i-col span="10">val</i-col>
								</Row>
								<Row v-for="(item,index) in customHeadersArr" :key="item[0]" style="margin-bottom:15px;">
									<i-col span="9">
										<i-input v-model="item[1]"></i-input>
									</i-col>
									<i-col span="9" offset="1">
										<i-input v-model="item[2]"></i-input>
									</i-col>
									<i-col span="4" offset="1">
										<i-button type="error" @click="deleteCustomHeader(index)">删除</i-button>
										<i-button type="success" @click="collectionCustomHeader(index)">收藏</i-button>
									</i-col>
								</Row>
							</div>
							<Modal v-model="collectionShow" title="我的收藏">
								<Row v-if="collectionArr.length" style="margin-bottom: 15px;">
									<i-col span="10">key</i-col>
									<i-col span="10">val</i-col>
								</Row>
								<div v-else>暂无收藏</div>
								<Row v-for="(item,index) in collectionArr" :key="item[0]" style="margin-bottom:15px;">
									<i-col span="9">
										<i-input v-model="item[1]"></i-input>
									</i-col>
									<i-col span="9" offset="1">
										<i-input v-model="item[2]"></i-input>
									</i-col>
									<i-col span="4" offset="1">
										<i-button type="error" @click="deleteCollection(index)">删除</i-button>
									</i-col>
								</Row>
								<div slot="footer">
									<i-button @click="collectionShow=false">{{label.close}}</i-button>
									<i-button type="primary" @click="saveCollection()">{{label.besure}}</i-button>
								</div>
							</Modal>
							<form class="fieldsetForm">
								<fieldset>
									<legend>Parameters</legend>
								</fieldset>
              </form>
							<div class="parameters-type">
								<span>Parameter Type : </span>
								<!-- <i-button :type="tableTextarea ? 'primary' : 'ghost'" @click="checkToForm">Form</i-button>
                <i-button :type="!tableTextarea ? 'primary' : 'ghost'" @click="checkToJson">Json</i-button> -->
                <i-select style="width: 350px;" v-model="requestSetting.requestParameterType">
                  <i-option v-for="item in parametersType" :value="item.value" :key="item.value">{{item.label}}</i-option>
                </i-select>
							</div>
							<!-- <i-table class="debug-table" v-show="tableTextarea" border :columns="debugColumns" :data="currentPageData.debugTable" size="small"
							 :no-data-text="label.none"></i-table> -->
							 <i-table class="debug-table" border :columns="debugColumns" :data="currentPageData.debugTable" size="small"
							 :no-data-text="label.none"></i-table>
							<!-- <div class="textarea">
								<textarea v-show="!tableTextarea" v-model="textareaJsonStr" :disabled="isDisabled" rows="10" style="width: 100%;"></textarea>
							</div> -->
							<div style="margin-top: 10px;margin-bottom: 10px;">
								<i-button @click="resetShowData">{{label.reset}}</i-button>
								<i-button type="primary" @click="submitDebug">{{label.debug}}</i-button>
							</div>
							<form class="fieldsetForm">
								<fieldset>
									<legend>Responses</legend>
								</fieldset>
							</form>
							<div class="response-box">
								<Spin size="large" fix v-show="spinShow"></Spin>
								<div class="response" v-show="showResponse">
									<!-- <div class="response-item">
										<h4 class="tit">Curl</h4>
										<div class="con">{{currentPageData.response && currentPageData.response.curl}}</div>
									</div> -->
									<div class="response-item">
										<h4 class="tit">
											<span style="padding-right: 20px;">Request URL</span>
											<i-button class="copyRequestUrl" size="small" @click="copySuccess" data-clipboard-target="#request-url">{{label.copyRequestUrl}}</i-button>
										</h4>
										<div class="con">
											<span>{{currentPageData.mainData && currentPageData.mainData.method}}</span>
											<span class="pad-left10" id="request-url">{{currentPageData.response && currentPageData.response.requestUrl}}</span>
										</div>
									</div>
									<div class="response-item">
										<h4 class="tit">Request Headers</h4>
										<div class="con">{{currentPageData.response && currentPageData.response.requestHeader}}</div>
									</div>
									<div class="response-item">
										<h4 class="tit">
											<span style="padding-right: 20px;">Response Body</span>
											<i-button class="copyResponseBody" size="small" @click="copySuccess" data-clipboard-target="#json-response">{{label.copyResponse}}</i-button>
										</h4>
										<div class="con response-body">
											<!-- <pre id="json-response"></pre> -->
											<div id="json-response"></div>
										</div>
									</div>
									<div class="response-item">
										<h4 class="tit">Response Code</h4>
										<div class="con">{{currentPageData.response && currentPageData.response.code}}</div>
									</div>
									<div class="response-item">
										<h4 class="tit">Response Headers</h4>
										<div class="con">{{currentPageData.response && currentPageData.response.headers}}</div>
									</div>
								</div>
							</div>
						</tab-pane>
					</Tabs>
				</div>
				<div class="zsx-footer">
					<!-- <a href="javascript:;" class="terms-service">{{info.termsOfService}}</a> -->
					<div class="copyright" style="color: #fff;"><a target="_blank" href="http://www.miitbeian.gov.cn">豫ICP备20006920号-1</a> 仅供个人学习使用</div>
				</div>
			</div>
			<div class="drag-line" id="drag-line"></div>
		</div>
	</div>

	<script src="static/js/polyfill.min.js"></script>
	<!-- <script src="static/js/vue.js"></script> -->
	<script src="static/js/vue.min.js"></script>
	<script src="static/iview/iview.min.js"></script>

	<!-- <script src="static/js/vue-i18n.js"></script> -->

	<script src="static/js/axios.min.js"></script>
	<script src="static/js/jquery-3.3.1.min.js"></script>
	<script src="static/iview/main.js"></script>
	<script src="static/js/jquery.json.js"></script>
	<script src="static/js/jsonlint.js"></script>
	<script src="static/js/clipboard.min.js"></script>
	<script src="static/js/iscroll-lite.js"></script>

	<script src="static/js/md5.js"></script>
</body>

</html>